<template>
  <el-dialog title="设置" width="60%" :visible="visible" @close="onCloseDialog">
    <el-tabs v-model="activeName">
      <!-- 出勤设置 -->
      <el-tab-pane label="出勤设置" name="first">
        <!-- 出勤设置表单 -->
        <AttendanceConfig ref="attendanceConfigRef" @close="onCloseDialog" />
      </el-tab-pane>

      <!-- 请假设置 -->
      <el-tab-pane label="请假设置" name="second">
        <!-- 请假设置表单 -->
        <LeaveConfig ref="leaveConfigRef" @close="onCloseDialog" />
      </el-tab-pane>

      <!-- 扣款设置 -->
      <el-tab-pane label="扣款设置" name="third">
        <DeductionConfig ref="deductionConfigRef" @close="onCloseDialog" />
      </el-tab-pane>

      <!-- 加班设置 -->
      <el-tab-pane label="加班设置" name="fourth">
        <ExtraDutyConfig ref="extraDutyConfigRef" @close="onCloseDialog" />
      </el-tab-pane>
    </el-tabs>

    <!-- 操作按钮 -->
    <el-row type="flex" justify="center">
      <el-button type="primary" size="medium" @click="onSaveSetting">保存更新</el-button>
      <el-button size="medium" @click="onCloseDialog">取消</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
import AttendanceConfig from './config-form/AttendanceConfig.vue'
import LeaveConfig from './config-form/LeaveConfig.vue'
import DeductionConfig from './config-form/DeductionConfig.vue'
import ExtraDutyConfig from './config-form/ExtraDutyConfig.vue'

export default {
  name: 'SettingEditor',
  components: {
    AttendanceConfig, // 出勤设置表单
    LeaveConfig, // 请假设置表单
    DeductionConfig, // 扣款设置表单
    ExtraDutyConfig // 加班设置表单
  },
  data() {
    return {
      visible: false, // 控制弹窗的显示隐藏
      activeName: 'first', // 当前激活的 tab 面板的 name 值
      departmentList: [], // 部门列表
      // 请假设置表单数据
      leaveForm: {
        departmentId: '' // 当前选中的部门id
      },
      // 请假设置表单校验规则
      leaveRules: {
        departmentId: [
          { required: true, message: '请选择部门', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  methods: {
    // 打开弹窗
    open() {
      this.visible = true
    },
    // 保存更新
    async onSaveSetting() {
      if (this.activeName === 'first') {
        // 保存出勤设置
        await this.$refs.attendanceConfigRef.saveAttendanceSetting()
      } else if (this.activeName === 'second') {
        // 保存请假设置
        await this.$refs.leaveConfigRef.saveLeaveSetting()
      } else if (this.activeName === 'third') {
        // 保存扣款设置
        await this.$refs.deductionConfigRef.saveDeductionSetting()
      } else {
        // 保存加班设置
        await this.$refs.extraDutyConfigRef.saveExtraDutySetting()
      }
    },
    // 关闭弹窗，重置表单数据
    onCloseDialog() {
      this.activeName = 'first'
      this.$refs.attendanceConfigRef.resetFormData()
      this.$refs.leaveConfigRef.resetFormData()
      this.$refs.deductionConfigRef.resetFormData()
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.el-tabs {
  padding: 0 20px;
}
</style>
